<template>
  <div>
    <div v-show="gameinfo.is_flash === 1" class="coupon" v-cloak>
      <div class="coupon-box">
        <div class="coupon-discount">
          <div class="coupon-text-icon">
            <img src="../../../assets/img/detail/text_discount.png" alt="">
          </div>
          <div class="countdown">
            <span>距结束</span>
            <span class="hour" v-if="day != 0">{{day || '0'}}天</span>
            <span class="hour" v-if="hour != 0">{{ hour || '0'}}小时</span>
          </div>
        </div>
        <div class="first-money">
          <span v-if="gameinfo.flash_type == 2"></span>
          <span v-else-if="gameinfo.flash_type == 3">每日</span>
          <span v-else-if="gameinfo.flash_type == 4">会员</span>
          <span v-else-if="gameinfo.flash_type == 5">会员每日</span>首充优惠<span class="bold">{{gameinfo.flash_discount}}%</span>，续充优惠<span class="bold">{{gameinfo.discount}}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      hour: 0,
      day: 0,
    }
  },
   mounted() {
    this.countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
    // 2. 开启定时器
    setInterval(this.countDown, 1000);
  },
  methods: {
    countDown() {
      var inputTime = +new Date(this.gameinfo.flash_discount_day);
      var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
      if (inputTime >= nowTime) {
        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
        var D = parseInt(times / 60 / 60 / 24) 
        this.day = D
        var h = parseInt(times / 60 / 60) % 24 + 1 //时
        this.hour = h // 把剩余的小时给 小时黑色盒子
      }
    },
    jumpClick() {
      // this.$router.push('/game_coupon_list/gameid/' + this.gameinfo.gameid)
    }
  }
}
</script>

<style lang="less" scoped>
[v-cloak] {
  display: none;
}

.coupon {
  box-sizing: border-box;
  width: 10rem;
  height: 1.413333rem;
  padding: 0 .426667rem .266667rem;
  background-color: #fff;
}

.coupon-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 1.146667rem;
  background: linear-gradient(130deg,#6a88ff 4%, #705bff 96%);
  border-radius: .133333rem;
}

.coupon-discount {
  width: 2.506667rem;
  height: 1.146667rem;
  background: linear-gradient(135deg,#fcb64d 4%, #ff8223 98%);
  border-radius: .133333rem 0 0 .133333rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coupon-text-icon {
  width: 2.16rem;
  height: .586667rem;
}

.coupon-text-icon img {
  width: 2.16rem;
  height: .586667rem;
}

.countdown {
  font-size: .293333rem;
  line-height: .32rem;
  color: #fff;

}

.hour {
  text-align: center;
}

.first-money {
  font-size: .32rem;
  color: #FF8C19;
  font-weight: 400;
  width: 6.64rem;
  height: 1.146667rem;
  background: #fff0d9;
  border-radius: 0 .133333rem .133333rem 0;
  line-height: 1.146667rem;
  text-align: center;
}

.first-money .bold {
  font-size: .426667rem;
  color: #ff5543;
  font-weight: 800;
}
</style>